<template>
  <div class="porter-work">
    <h1 class="title">护工消毒</h1>
    
    <div class="form-container">
      <el-form :model="formData" label-width="200px">
        <el-form-item>
          <div class="checkbox-item">
            <el-checkbox v-model="formData.replaceBedSheet">
              <div class="checkbox-content">
                <img v-if="formData.replaceBedSheet" src="@/assets/images/checked.png" class="status-icon" />
                <span>更换床单</span>
              </div>
            </el-checkbox>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="checkbox-item">
            <el-checkbox v-model="formData.replaceBedding">
              <div class="checkbox-content">
                <img v-if="formData.replaceBedding" src="@/assets/images/checked.png" class="status-icon" />
                <span>更换被褥</span>
              </div>
            </el-checkbox>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="checkbox-item">
            <el-checkbox v-model="formData.disinfectCabinet">
              <div class="checkbox-content"> 
                <img v-if="formData.disinfectCabinet" src="@/assets/images/checked.png" class="status-icon" />
                <span>消毒液擦拭床头柜</span>
              </div>
            </el-checkbox>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="checkbox-item">
            <el-checkbox v-model="formData.pillowUV">
              <div class="checkbox-content">
                <img v-if="formData.pillowUV" src="@/assets/images/checked.png" class="status-icon" />
                <span>枕头紫外线照射</span>
              </div>
            </el-checkbox>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="checkbox-item">
            <el-checkbox v-model="formData.replaceMattress">
              <div class="checkbox-content">
                <img v-if="formData.replaceMattress" src="@/assets/images/checked.png" class="status-icon" />
                <span>更换床垫</span>
              </div>
            </el-checkbox>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="checkbox-item">
            <el-checkbox v-model="formData.dischargeDisinfection">
              <div class="checkbox-content">
                <img v-if="formData.dischargeDisinfection" src="@/assets/images/checked.png" class="status-icon" />
                <span>出院消毒</span>
              </div>
            </el-checkbox>
          </div>
        </el-form-item>
      </el-form>

      <div class="button-container">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const formData = ref({
  replaceBedSheet: false,
  replaceBedding: false,
  disinfectCabinet: false,
  pillowUV: false,
  replaceMattress: false,
  dischargeDisinfection: false
})

const handleSubmit = () => {
  // 这里可以添加提交逻辑
  console.log('提交的数据:', formData.value)
  // 提交成功后返回上一页
  router.back()
}

const handleCancel = () => {
  router.back()
}
</script>

<style scoped>
.porter-work {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 24px;
  color: #333;
}

.form-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.checkbox-item {
  margin: 20px 0;
}

.checkbox-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-icon {
  width: 20px;
  height: 20px;
}

:deep(.el-checkbox__label) {
  font-size: 16px;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.el-button {
  width: 120px;
  height: 40px;
}
</style> 